{% extends "stocksys/base/base_page.html" %}
{% load staticfiles %}
{% block headscript %}
    {% include "stocksys/base/codemirror_core.html" %}
    <style type="text/css">
        .CodeMirror {
            border: 1px solid #eee;

            min-height: 600px;
            width: 100%;
        }
    </style>
    <script>
        function save_code() {
            var token = $.cookie('csrftoken');
            $.ajax({
                url: "{% url 'stocksys:rule_editor_put'%}",
                dataType: "json",
                method: "PUT",
                headers: {'X-CSRFToken': token},
                data: {
                    'rule_id':{{ rule.id }},
                    'code': $("#python_code").val(),
                },
                success: function (data) {
                    console.log(data['state']);
                    swal({
                        title: "保存成功",
                        text: "保存规则代码",
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-success",
                        type: "success"
                    }).catch(swal.noop);
                },
                error: function (e) {
                    swal({
                        title: "请求错误",
                        text: data['info'],
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-error",
                        type: "error"
                    }).catch(swal.noop);
                }
            });
        }
    </script>
{% endblock %}
{% block content %}
    <div class="content buttons-with-margin">
        <div class="row">
            <div class="col-md-6">
                <div class="header">
                    <h4 class="title">{{ rule.name }}-{{ rule.name_en }}</h4>
                </div>
                <div class="content">
                    <div class="btn-toolbar" role="toolbar">
                        <div class="btn-group btn-group-seperator">
                            <button type="button" onclick="save_code()" class="btn btn-default "><i class="ti-save">保存代码</i></button>
                            <button type="button"  class="btn btn-default">启动回测</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="select col-md-4">
                最近更新时间：{{ rule.update_datetime | date:"Y-m-d H:i:s" }}
            </div>
        </div>
        <div class="row">
            <div id="python_code_content" class="col-md-6">
                <textarea id="python_code" style="resize: none;">{{ code_content }}</textarea>
            </div>
            <div class="content" id="operation_button">
            </div>
        </div>
        <div class="row">

        </div>
    </div>
{% endblock %}


{% block pagescript %}
    <script>
        var te_python = document.getElementById("python_code");

        var python_editor = CodeMirror.fromTextArea(te_python, {
            mode: "python",
            theme: "material-darker",
            lineNumbers: true,
            extraKeys: {
                "Ctrl-Q": function (cm) {
                    cm.foldCode(cm.getCursor());
                },
                "Ctrl-S": function (cm) {
                    cm.save();
                    console.log(cm.getValue());
                    save_code();
                },
                "F11": function (cm) {
                    if ($("#operation_button").is(":hidden")) {
                        $("#python_code_content").removeClass("swal2-container").addClass("col-md-6").css({
                            'overflow': 'auto',
                            'width': '',
                        });
                        $(".CodeMirror").css({'width': '100%', 'min-height': "600px", "height": ""});
                        $("#operation_button").show();
                    } else {
                        $("#python_code_content").removeClass("col-md-10").addClass("swal2-container").css({
                            'overflow': 'scroll',
                            'width': '100%',
                        });
                        $(".CodeMirror").css({'width': '100%', 'min-height': "none", "height": "100%"});
                        $("#operation_button").hide();
                    }
                },
                "Esc": function (cm) {
                    if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
                }
            },
            foldGutter: true,
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
        });
    </script>
    </div>
{% endblock %}

